<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园寻物平台 - 注册</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4F46E5',
                        secondary: '#10B981'
                    },
                    borderRadius: {
                        'none': '0px',
                        'sm': '2px',
                        DEFAULT: '4px',
                        'md': '8px',
                        'lg': '12px',
                        'xl': '16px',
                        '2xl': '20px',
                        '3xl': '24px',
                        'full': '9999px',
                        'button': '4px'
                    }
                }
            }
        }
    </script>
    <style>
        .fa-icon {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 20px;
            height: 20px;
        }
        input[type="number"]::-webkit-outer-spin-button,
        input[type="number"]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        input[type="number"] {
            -moz-appearance: textfield;
        }
    </style>
</head>
<body class="min-h-[1024px] bg-gray-50 font-sans">
    <div class="flex min-h-[1024px]">
        <!-- 左侧展示区 -->
        <div class="w-1/2 relative overflow-hidden">
            <div class="absolute inset-0 bg-gradient-to-r from-blue-500/20 to-blue-500/5 z-10"></div>
            <img 
                src="https://ai-public.mastergo.com/ai/img_res/2eda71b22e38f4135d61d6501aa7dc44.jpg" 
                alt="校园背景"
                class="w-full h-full object-cover object-top"
            >
            <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-20 w-3/4">
                <h1 class="text-5xl font-bold text-white mb-6 font-['Pacifico']">校园寻物</h1>
                <p class="text-xl text-white mb-8">加入校园寻物平台，让失物快速回家</p>
                <div class="flex space-x-4">
                    <div class="w-12 h-12 rounded-full bg-white/20 flex items-center justify-center animate-bounce">
                        <i class="fas fa-book text-white text-xl"></i>
                    </div>
                    <div class="w-12 h-12 rounded-full bg-white/20 flex items-center justify-center animate-bounce" style="animation-delay: 0.2s">
                        <i class="fas fa-key text-white text-xl"></i>
                    </div>
                    <div class="w-12 h-12 rounded-full bg-white/20 flex items-center justify-center animate-bounce" style="animation-delay: 0.4s">
                        <i class="fas fa-user-graduate text-white text-xl"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧注册区 -->
        <div class="w-1/2 flex flex-col justify-between">
            <div class="max-w-md mx-auto w-full px-8 py-12">
                <div class="mb-10">
                    <h2 class="text-3xl font-bold text-gray-900 mb-2">创建新账号</h2>
                    <p class="text-gray-600">请填写以下信息完成注册</p>
                </div>

                <form class="space-y-6">
                    <div>
                        <h3 class="text-lg font-medium text-gray-900 mb-4">1. 基本信息</h3>
                        <div class="space-y-4">
                            <div>
                                <label for="studentId" class="block text-sm font-medium text-gray-700 mb-1">学号</label>
                                <div class="relative">
                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                        <i class="fas fa-id-card text-gray-400 fa-icon"></i>
                                    </div>
                                    <input 
                                        type="text" 
                                        id="studentId" 
                                        name="studentId" 
                                        placeholder="请输入您的学号" 
                                        class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary text-sm"
                                        required
                                    >
                                </div>
                            </div>
                            <div>
                                <label for="password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                                <div class="relative">
                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                        <i class="fas fa-lock text-gray-400 fa-icon"></i>
                                    </div>
                                    <input 
                                        type="password" 
                                        id="password" 
                                        name="password" 
                                        placeholder="请输入密码" 
                                        class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary text-sm"
                                        required
                                    >
                                </div>
                                <div class="mt-1 h-1 w-full bg-gray-200 rounded-full overflow-hidden">
                                    <div class="h-full bg-red-500 w-1/4" id="password-strength"></div>
                                </div>
                                <p class="text-xs text-gray-500 mt-1">密码强度: 弱</p>
                            </div>

                            <div>
                                <label for="confirmPassword" class="block text-sm font-medium text-gray-700 mb-1">确认密码</label>
                                <div class="relative">
                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                        <i class="fas fa-lock text-gray-400 fa-icon"></i>
                                    </div>
                                    <input 
                                        type="password" 
                                        id="confirmPassword" 
                                        name="confirmPassword" 
                                        placeholder="请再次输入密码" 
                                        class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary text-sm"
                                        required
                                    >
                                </div>
                                <p class="text-xs text-red-500 hidden mt-1" id="password-match-error">两次输入的密码不一致</p>
                            </div>
                        </div>
                    </div>

                    <div>
                        <h3 class="text-lg font-medium text-gray-900 mb-4">2. 身份信息</h3>
                        <div class="space-y-4">
                            <div>
                                <label for="fullName" class="block text-sm font-medium text-gray-700 mb-1">真实姓名</label>
                                <input 
                                    type="text" 
                                    id="fullName" 
                                    name="fullName" 
                                    placeholder="请输入您的真实姓名" 
                                    class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary text-sm"
                                    required
                                >
                            </div>

                            <div>
                                <label for="college" class="block text-sm font-medium text-gray-700 mb-1">学院</label>
                                <div class="relative">
                                    <select 
                                        id="college" 
                                        name="college" 
                                        class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary text-sm appearance-none bg-white"
                                        required
                                    >
                                        <option value="">请选择您的学院</option>
                                        <option value="computer">计算机科学与技术学院</option>
                                        <option value="business">商学院</option>
                                        <option value="art">艺术学院</option>
                                        <option value="engineering">工程学院</option>
                                        <option value="medicine">医学院</option>
                                    </select>
                                    <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                        <i class="fas fa-chevron-down text-gray-400 fa-icon"></i>
                                    </div>
                                </div>
                            </div>

                            <div>
                                <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">联系电话</label>
                                <div class="relative">
                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                        <i class="fas fa-phone text-gray-400 fa-icon"></i>
                                    </div>
                                    <input 
                                        type="tel" 
                                        id="phone" 
                                        name="phone" 
                                        placeholder="请输入您的手机号码" 
                                        class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary text-sm"
                                        required
                                    >
                                </div>
                                <p class="text-xs text-red-500 hidden mt-1" id="phone-error">请输入有效的手机号码</p>
                            </div>

                            <div>
                                <label for="email" class="block text-sm font-medium text-gray-700 mb-1">电子邮箱 (选填)</label>
                                <div class="relative">
                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                        <i class="fas fa-envelope text-gray-400 fa-icon"></i>
                                    </div>
                                    <input 
                                        type="email" 
                                        id="email" 
                                        name="email" 
                                        placeholder="请输入您的电子邮箱" 
                                        class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary text-sm"
                                    >
                                </div>
                                <p class="text-xs text-red-500 hidden mt-1" id="email-error">请输入有效的电子邮箱</p>
                            </div>
                        </div>
                    </div>

                    <div class="flex items-start">
                        <div class="flex items-center h-5">
                            <input 
                                id="agreement" 
                                name="agreement" 
                                type="checkbox" 
                                class="focus:ring-primary h-4 w-4 text-primary border-gray-300 rounded"
                                required
                            >
                        </div>
                        <div class="ml-3 text-sm">
                            <label for="agreement" class="font-medium text-gray-700">我已阅读并同意</label>
                            <a href="#" class="text-primary hover:text-primary-dark">《用户协议》</a>
                            <span class="text-gray-700">和</span>
                            <a href="#" class="text-primary hover:text-primary-dark">《隐私政策》</a>
                        </div>
                    </div>

                    <div>
                        <button 
                            type="submit" 
                            class="w-full flex justify-center py-2 px-4 border border-transparent rounded-button shadow-sm text-sm font-medium text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary whitespace-nowrap"
                        >
                            立即注册
                        </button>
                    </div>
                </form>
                <div class="mt-6 text-center">
                    <p class="text-sm text-gray-600">
                        已有账号？
                        <a href="#" class="font-medium text-primary hover:text-primary-dark">立即登录</a>
                    </p>
                </div>
            </div>

            <div class="border-t border-gray-200 py-4 px-8">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <p class="text-sm text-gray-500 mb-2 md:mb-0">© 2023 校园寻物平台. 保留所有权利.</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-sm text-gray-500 hover:text-gray-700">帮助中心</a>
                        <a href="#" class="text-sm text-gray-500 hover:text-gray-700">联系我们</a>
                        <a href="#" class="text-sm text-gray-500 hover:text-gray-700">隐私政策</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const passwordInput = document.getElementById('password');
            const confirmPasswordInput = document.getElementById('confirmPassword');
            const passwordMatchError = document.getElementById('password-match-error');
            const phoneInput = document.getElementById('phone');
            const phoneError = document.getElementById('phone-error');
            const emailInput = document.getElementById('email');
            const emailError = document.getElementById('email-error');
            const passwordStrength = document.getElementById('password-strength');
            // 密码强度检测
            passwordInput.addEventListener('input', function() {
                const password = this.value;
                let strength = 0;
                
                if (password.length >= 8) strength += 1;
                if (password.match(/[a-z]/)) strength += 1;
                if (password.match(/[A-Z]/)) strength += 1;
                if (password.match(/[0-9]/)) strength += 1;
                if (password.match(/[^a-zA-Z0-9]/)) strength += 1;
                
                let width = '0%';
                let color = 'bg-red-500';
                let text = '弱';
                
                if (strength >= 4) {
                    width = '100%';
                    color = 'bg-green-500';
                    text = '强';
                } else if (strength >= 2) {
                    width = '66%';
                    color = 'bg-yellow-500';
                    text = '中';
                } else if (strength >= 1) {
                    width = '33%';
                }
                
                passwordStrength.className = `h-full ${color} w-${width}`;
                passwordStrength.nextElementSibling.textContent = `密码强度: ${text}`;
            });

            // 密码一致性验证
            confirmPasswordInput.addEventListener('input', function() {
                if (passwordInput.value !== this.value) {
                    passwordMatchError.classList.remove('hidden');
                } else {
                    passwordMatchError.classList.add('hidden');
                }
            });

            // 手机号验证
            phoneInput.addEventListener('blur', function() {
                const phoneRegex = /^1[3-9]\d{9}$/;
                if (!phoneRegex.test(this.value)) {
                    phoneError.classList.remove('hidden');
                } else {
                    phoneError.classList.add('hidden');
                }
            });

            // 邮箱验证
            emailInput.addEventListener('blur', function() {
                if (this.value === '') return;
                
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (!emailRegex.test(this.value)) {
                    emailError.classList.remove('hidden');
                } else {
                    emailError.classList.add('hidden');
                }
            });
        });
    </script>
</body>
</html>